<ng-container *ngIf="device">
    <nz-card nzTitle="基本信息">
        <table class="table table-bordered">
            <td rowspan="6" style="width: 180px">
                <qr [backgroundAlpha]="1.0"
                    [background]="'#fff'"
                    [foregroundAlpha]="1.0"
                    [foreground]="'#000'"
                    [mime]="'image/png'"
                    [padding]="0"
                    [size]="180"
                    value="https://wx.kuaixing.vip/reseller_signup.html"></qr>
            </td>

            <tr>
                <th>设备标识</th>
                <td width="180">
                    <div class="row">
                        <ellipsis length="10">{{ device?.deviceId }}</ellipsis>
                        &nbsp; <a (click)="copy(device.deviceId)">复制</a></div>
                </td>
                <th>设备名称</th>
                <td>{{device?.deviceName}}&nbsp; <a (click)="copy(device?.deviceSecret)">复制</a></td>
                <th>设备型号</th>
                <td>{{device?.productName}}</td>
            </tr>
            <tr>
                <th>设备秘钥</th>
                <td>
                    <div class="row">
                        <ellipsis length="10">{{ device?.deviceSecret }}</ellipsis>
                        &nbsp; <a (click)="copy(device?.deviceSecret)">复制</a></div>
                </td>
                <th>当前状态</th>
                <td>
                    <nz-tag nzColor="#2db7f5">{{status[device.status].text}}</nz-tag>
                </td>
                <th>IP地址</th>
                <td>{{device?.ipAddress}}</td>
            </tr>
            <tr>
                <th>添加时间</th>
                <td>{{device?.createdDate |date:'yyyy-MM-dd HH:mm:ss'}}</td>
                <th>激活时间</th>
                <td>{{device?.activeDate |date:'yyyy-MM-dd HH:mm:ss'}}</td>
                <th>最后上线时间</th>
                <td>{{device?.onlineDate |date:'yyyy-MM-dd HH:mm:ss'}}</td>
            </tr>
            <tr>
                <th>所在省/市</th>
                <td>{{device?.provinceName}}</td>
                <th>所在市/区</th>
                <td>{{device?.cityName}}</td>
                <th>所在区/县</th>
                <td>{{device?.districtName}}</td>
            </tr>
            <tr>
                <th>当前库存</th>
                <td>{{device?.stock}}</td>
                <th>设备位置</th>
                <td colspan="3">{{device?.address}}</td>
            </tr>
        </table>
    </nz-card>
    <nz-card nzTitle="商家信息">
        <table *ngIf="store$ | async as store" class="table table-bordered">
            <tr>
                <th>商家名称</th>
                <td>
                    <div><span>{{store.name}}</span><a (click)="editStore(tp)"> 修改商家 </a>
                        <ng-template #tp>
                            <nz-select
                                    [(ngModel)]="device.storeId"
                                    nzAllowClear
                                    nzPlaceHolder="选择商家"
                                    nzShowSearch
                                    style="width: 100%;">
                                <nz-option *ngFor="let o of stores" [nzLabel]="o.name" [nzValue]="o.id"></nz-option>
                            </nz-select>
                        </ng-template>
                    </div>
                </td>
                <th>联系人</th>
                <td>
                    <div><span>{{store.contact}}</span></div>
                </td>
                <th>商家地址</th>
                <td>
                    <div><span>{{store.address}}</span></div>
                </td>

            </tr>
        </table>
    </nz-card>
</ng-container>
